<template>
  <div class="main">
    <slot />
    <swiper
      class="swiper-container"
      :navigation="{
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }"
      :pagination="{
        clickable: false,
      }"
    >
      <div class="swiper-button-prev"></div>

      <swiper-slide class="swiper-slide" v-for="item in arr">
        <slot name="list" :item="item" />
      </swiper-slide>

      <!-- 下一页 -->
      <div class="swiper-button-next"></div>

      <!-- 如果需要分页器 -->
      <!-- <div class="swiper-pagination"></div> -->
      <!-- 如果需要导航按钮 左右箭头。如果放置在swiper-container外面，需要自定义样式。-->

      <!-- <div class="swiper-button-next"></div> -->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'SwiperHome',
}
</script>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'

import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from 'swiper'

import 'swiper/swiper-bundle.css'
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay])

const arr = [
  [
    { img: './img/300.jpg', title: '123', playCount: '456' },
    { img: './img/300.jpg', title: '123', playCount: '456' },
    { img: './img/300.jpg', title: '123', playCount: '456' },
    { img: './img/300.jpg', title: '123', playCount: '456' },
    { img: './img/300.jpg', title: '123', playCount: '456' },
    { img: './img/300.jpg', title: '123', playCount: '456' },
  ],
]
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 532px;
  background: url('../img/bg.png') 50% 0 repeat-x;
}
.swiper-body {
  width: 1200px;
  margin: 0px auto;
}
</style>
